<template>
  <!-- 用户信息-详情 -->
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="edit"><a-icon type="form" />编辑</a-button>
          <a-button type="primary" @click="backList"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="用户信息" key="1" disabled>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>用户编号：</p>
            <p>{{detailData.partner_no}}</p>
          </a-col>
          <a-col :span="8">
            <p>用户名：</p>
            <p>{{detailData.email}}</p>
          </a-col>
          <a-col :span="8">
            <p>手机号：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
          <a-col :span="8">
            <p>微信：</p>
            <p>{{detailData.wx_unionid}}</p>
          </a-col>
          <a-col :span="8">
            <p>支付宝：</p>
            <p>{{detailData.ali_userid}}</p>
          </a-col>
          <a-col :span="8">
            <p>状态：</p>
            <p>{{detailData.is_enable ? '开启' : '关闭'}}</p>
          </a-col>
          <a-col :span="8">
            <p>创建时间：</p>
            <p>{{detailData.created_at}}</p>
          </a-col>
          <a-col :span="8">
            <p>更新时间：</p>
            <p>{{detailData.updated_at}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <div class="modal-wrap">
      <a-modal
        title="编辑"
        v-model="visible"
        @ok="handleUserMsg"
        :destroyOnClose="true"
      >
        <a-form :form="form" class="form-wrap basic-form-pop">
          <a-form-item label="*手机号：">
            <a-input v-model.trim="userPhone" placeholder="请输入手机号"/>
          </a-form-item>
          <a-form-item label="操作密码：">
            <a-input v-model.trim="operatePassword" type="password" placeholder="密码不可见,可修改(6-12 数字加字母组合)"/>
          </a-form-item>
          <a-form-item label="登录密码：">
            <a-input v-model.trim="loginPassword" type="password" placeholder="密码不可见,可修改(6位数字)"/>
          </a-form-item>
          <a-form-item label="状态：">
            <a-radio-group @change="onChange" v-model="isEnable">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="0">停用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { partnerUser, UserUpdate } from '../../../store/providerApi'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      activeKey: ['1'],
      detailData: {},
      visible: false,
      operatePassword: '',
      loginPassword: '',
      isEnable: Number,
      userPhone: ''
    }
  },
  mounted () {
    this.userInit()
  },
  methods: {
    userInit () {
      partnerUser({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
      })
    },
    edit () {
      this.visible = true
      this.userPhone = this.detailData.phone
      this.isEnable = this.detailData.is_enable ? 1 : 0
    },
    handleUserMsg () {
      if (this.userPhone == this.detailData.phone && this.operatePassword == '' && this.operatePassword == '' && this.isEnable == this.detailData.is_enable) {
        this.$message.success('修改成功')
        this.visible = false
      } else {
        UserUpdate({
          id: this.$route.query.id,
          phone: this.userPhone,
          password: this.loginPassword,	// 登录密码 6-12 数字加字母组合
          op_password: this.operatePassword, // 操作密码 6位数字
          is_enable: this.isEnable// 使用状态 0禁止1启用
        }).then(res => {
          this.$message.success(res.data.message)
          this.userInit()
          this.visible = false
        })
      }
    },
    onChange (e) {
      this.isEnable = e.target.value
      // console.log('radio checked', e.target.value)
    },
    backList() {
      this.$router.push('/menu/provider/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.detailMain {
  .top-btns{
    margin-top: 20px;
  }
}
.basic-form-pop {
  input{
    width: 80%;
  }
}
</style>